<template>
  <a-affix :offsetTop="state.headerOffsetTop">
    <TopHeader/>
  </a-affix>
  <a-affix :offsetTop="state.contentOffsetTop">
    <router-view/>
  </a-affix>
</template>

<script lang="ts">
import TopHeader from './TopHeader.vue';
import { defineComponent } from 'vue';
import { reactive } from "@vue/reactivity";

export default defineComponent({
  name: 'home',
  components: {
    TopHeader
  },
  setup() {
    const state = reactive({
      headerOffsetTop: 0,
      contentOffsetTop: 30
    })
    return {
        state
    }
  }
});
</script>
